<template>
  <div class="blue-print">
    <div class="blue-print-title" :class="data?.type">
<!--      <flow :name="'flow-'+data?.type" :class="'flow-'+data?.type"/>-->
      {{data?.name}}
    </div>
    <template v-if="data">
      <div class="blue-print-body">
        <div class="input-box">
          <template v-for="(item) in data.input" :key="item.id">
            <div>
              {{item.name}}
<!--              <flow magnet="true" :class="'flow-'+item.type" :port="item.id" :name="'flow-'+item.type"/>-->
              <div class="flow-dot" magnet="true" :class="'flow-'+item.type"></div>
            </div>
          </template>
        </div>
        <div class="output-box">
          <template v-for="(item) in data.output" :key="item.id">
            <div>
              {{item.name}}
<!--              <flow magnet="true" :class="'flow-'+item.type" :port="item.id" :name="'flow-'+item.type"/>-->
              <div class="flow-dot" magnet="true" :class="'flow-'+item.type"></div>
            </div>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import {inject,ref} from "vue";
import {Node} from "@antv/x6";
import {NodeDataItem} from "./types";
import '../icon/icon.css'

const getNode=inject<()=>Node>('getNode')
const data=ref<NodeDataItem>()
if(getNode){
  const node=getNode()
  data.value=node.getData();
  if (data.value){
    data.value.id=node.id;
  }
}
</script>
<style scoped lang="scss">
.blue-print{
  width: 400px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #9f9f9f;
  .blue-print-title{
    width: 100%;
    height: 32px;
    color: #eeeeee;
    padding: 0 5px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .blue-print-body{
    width: 100%;
    flex: 1;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px;
    display: flex;
    flex-direction: row;
    color: #eeeeee;
    .input-box{
      width: 50%;
      &>div{
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: start;
      }
    }
    .output-box{
      width: 50%;
      &>div{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
      }
    }
  }
  .Function{
    background: linear-gradient(to right, #3068ed, #102551);
  }
  .Event{
    background: linear-gradient(to right, #da0b0b, #320202);;
  }
}
</style>
